@charset "utf-8";

@import url("./var.less");

* {
    padding    : 0;
    margin     : 0;
    box-sizing : border-box;
    line-height: 1.8;
}

a {
    .hColorMixin(color, all);
    text-decoration: none;
}

body {
    min-height: 100vh;
    .bodyBgColorMixin(background-color);
    .hColorMixin();
}

@headerHeight : 80px;
@footerHeight : 4em;

/* 页眉 */
.layout-header {
    height         : @headerHeight;
    display        : flex;
    justify-content: flex-end;
    align-items    : center;

    .nav {
        margin-right: 1em;
        list-style  : none;
        display     : flex;
        align-items : flex-end;

        li {
            display: inline-block;
            margin : 0 12px;
        }
    }

    &::before {
        content         : '';
        position        : absolute;
        z-index         : -2;
        left            : 0;
        top             : 0;
        height          : @headerHeight;
        width           : 100%;
        background-color: var(--color-head-bg);
        transition      : background-color .3s ease;
    }

    &.fixed {
        position  : fixed;
        z-index   : 1;
        width     : 100%;
        transition: box-shadow .3s ease;

        &.show {
            box-shadow: #0000001a 0px 10px 15px -3px, #0000001a 0px 4px 6px -4px;
        }

        &::before {
            @supports(backdrop-filter : blur(20px)) {
                background-color       : rgba(var(--color-head-bg-rgb), .4);
                -webkit-backdrop-filter: blur(20px);
                backdrop-filter        : blur(20px);
            }
        }
    }
}

/* 绝对定位时 页眉 */
.layout-header_placeholder {
    height: @headerHeight;
}

/* 主体 */
.layout-main {
    display   : block;
    margin    : 50px auto;
    max-width : 48em;
    width     : 95%;
    min-height: calc(100vh - @headerHeight - @footerHeight - 80px);

    article {
        .post-header {
            .post-title {
                display    : block;
                margin-left: -10px;

                a {
                    font-size      : 1.1rem;
                    text-decoration: none;
                }
            }

            .post-meta {
                .metaColorMixin();
                font-size: 14px;
            }

        }

        .post-content {
            font-weight: 300;
            font-size  : 14px;
        }
    }

}

/* 页尾 */
.layout-footer {
    font-size : 14px;
    margin-top: 80px;
    height    : @footerHeight;
    text-align: center;

    #since {
        font-family: monospace, Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New;
    }

    a {
        .linkDecorationMixin();
    }
}

/* 友连 */
.links-card {
    padding: 0 30px;
    border : none !important;

    .post-header {
        text-align   : center;
        min-height   : 3em;
        margin-bottom: 1em;
    }

    .linf-info {
        padding   : 1.5em 0;
        border-top: 1px dashed var(--color-dashed, #c5c5c5);

        .linf-info-title {
            font-size: 1.1rem;
        }
    }

    .links-list {
        padding      : 2em 0;
        border-top   : 1px dashed var(--color-dashed, #c5c5c5);
        border-bottom: 1px dashed var(--color-dashed, #c5c5c5);

        .links-list-item {
            list-style      : none !important;
            position        : relative;
            padding         : 10px 0;
            border-radius   : 5px;
            transition      : all var(--transitionTime, .3s ease);
            background-color: var(--color-link-item-bg, #f9f9f9);
            margin-bottom   : 3px;

            >a {
                display          : -webkit-box;
                display          : -ms-flexbox;
                display          : flex;
                -webkit-box-align: center;
                -ms-flex-align   : center;
                align-items      : center;
                overflow         : hidden;

                .item-avatar {
                    width : 54px;
                    height: 54px;
                    margin: 0 20px;

                    img {
                        width        : 100%;
                        height       : 100%;
                        border-radius: 50%;
                        box-shadow   : none !important;
                        padding      : 2px;
                    }
                }

                .item-info {
                    -webkit-box-flex: 1;
                    -ms-flex        : 1;
                    flex            : 1;

                    h3 {
                        font-size: 1rem;
                    }

                    p {
                        margin   : 0;
                        font-size: .9em;
                    }
                }
            }

            &:hover {
                background-color: var(--color-link-item-bg-tint, #fff);
            }
        }
    }
}

/* 归档 */
.archives {
    .post-header {
        text-align: center;
        min-height: 3em;
    }

    .category-all-page {
        padding-left: 36px;

        .category-title {
            font-size: 24px;
        }

        .category-link {
            display    : inline-block;
            margin-left: 1em;
        }

        .category-count {
            .metaColorMixin();

            &:before {
                display: inline;
                content: " (";
            }

            &:after {
                display: inline;
                content: ") ";
            }
        }
    }

    .timeline {

        .timeline-item {
            margin : 10px 0;
            display: flex;

            .timeline-time {
                position    : relative;
                margin-right: .5em;
                width       : 96px;
                font-size   : 16px;
                display     : inline-block;
                text-align  : right;
                height      : max-content;

                &.timeline-time-year {
                    font-size: 24px;
                }
            }

            .timeline-content {
                flex      : 1;
                word-break: break-all;

                a {
                    padding  : 0 .5em;
                    font-size: 18px;

                    &:hover {
                        text-decoration : line-through;
                        background-color: #000;
                        color           : #fff
                    }
                }
            }
        }
    }
}

/* 首页文章卡片 */
.posts-expand {

    .home-article {
        padding      : 1.5em;
        margin       : 2em 0;
        border-radius: 4px;
        position     : relative;
        overflow     : hidden;
        transition   : box-shadow var(--transitionTim, .3s ease);

        .post-title {
            margin-left: 0 !important;
        }

        &:hover {
            box-shadow: #0000001a 0px 10px 15px -3px, #0000001a 0px 4px 6px -4px;

            .post-title {
                a {
                    color: var(--color-link, #6062ce);
                }
            }
        }

        &::before {
            content         : ' ';
            position        : absolute;
            top             : 1.5em;
            width           : 1em;
            height          : 2px;
            background-color: var(--color-link, #6062ce);
        }

        .post-top {
            position: absolute;
            top     : 0;
            right   : 0;
        }
    }
}

/* 文章详情页 */
.detail-article {

    .post-header {
        text-align    : center;
        padding-bottom: 10px;
        border-bottom : 1px dashed var(--color-dashed, #c5c5c5);
        width         : max-content;
        margin        : 0 auto 3em;
    }

    p {
        font-weight: 300;
        margin     : 1em 0
    }

    a {
        font-weight: 600;
        .postLinkMixin();
    }

    img {
        display      : block;
        max-width    : 100%;
        border-radius: 8px;
        margin       : .5rem auto;
        box-shadow   : 0 2px 11px 0 #31313117;
    }

    img+em {
        display    : block;
        font-family: 'Alegreya Sans', 'Helvetica', 'Arial', sans-serif;
        font-size  : .9rem;
        font-style : normal;
        text-align : center
    }

    img.emoji {
        display       : inline-block;
        left          : 0;
        transform     : none;
        width         : 1rem;
        height        : 1rem;
        vertical-align: text-top;
        padding       : 0;
        margin        : 0
    }

    >p:first-of-type::first-line {
        font-family   : "Alegreya SC";
        letter-spacing: .01em
    }


    ul {
        margin-left: 2.5em;

        li {
            font-weight: 300
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: 'KaiTi', serif;

        a {
            display: none;
        }
    }

    /*  h2 {
        font-size  : 1.5em;
    }

    h3 {
        font-size  : 1.2em;
        font-family: 'KaiTi', serif
    }

    h5 {
        font-family : 'KaiTi', serif;
        font-size   : 100%;
        font-weight : 300;
        line-height : 1.8;
        border-left : 4px solid #ddd;
        padding-left: 20px;
        margin      : 0 0 1em
    } */
}

/* 上下篇 */
.prev-next-content {
    display        : flex;
    justify-content: space-between;

    >div {
        flex  : 1;
        width : 50%;
        margin: 1em 0;

        +div {
            text-align: right;
        }

        div {
            padding: 0 5px;
        }

        >a {
            max-width    : 100%;
            padding      : 0 5px;
            display      : inline-block;
            white-space  : nowrap;
            overflow     : hidden;
            text-overflow: ellipsis;
            .postLinkMixin();
            font-size: 16px;
        }
    }
}

/* 主题切换按钮 */
.theme-toggle {
    cursor     : pointer;
    position   : relative;
    user-select: none;
    top        : -3px;

    .theme-toggle-track {
        background-color: #4d4d4d;
        border-radius   : 30px;
        height          : 24px;
        transition      : .2s;
        width           : 50px;


        .theme-toggle-track-check,
        .theme-toggle-track-x {
            position: absolute;
            bottom  : 0;
            top     : 0px;
            height  : 10px;
            margin  : auto 0;


            .toggle {
                display        : flex;
                justify-content: center;
                align-items    : center;
                height         : 10px;
                width          : 10px;
            }
        }

        .theme-toggle-track-check {
            left      : 8px;
            opacity   : 0;
            transition: opacity .25s;
            width     : 14px;
        }

        .theme-toggle-track-x {
            width     : 10px;
            margin    : auto 0;
            transition: opacity .25s;
            right     : 8px;
        }

        .theme-toggle-thumb {
            background-color: #fafafa;
            border          : 1px solid #4d4d4d;
            border-radius   : 50%;
            height          : 22px;
            left            : 1px;
            position        : absolute;
            top             : 1px;
            transition      : .25s;
            width           : 22px;
        }
    }

    &.theme-toggle--checked {
        .theme-toggle-track-check {
            opacity   : 1;
            transition: opacity .25s;
        }

        .theme-toggle-track-x {
            opacity: 0;
        }

        .theme-toggle-thumb {
            left: 27px;
        }
    }

    .theme-toggle-screenreader-only {
        clip    : rect(0 0 0 0);
        border  : 0;
        height  : 1px;
        margin  : -1px;
        overflow: hidden;
        position: absolute;
        width   : 1px;
    }
}

/* 主题切换动画 */
.light-switch-mark {
    position        : fixed;
    width           : 100vw;
    height          : 100vh;
    left            : 0;
    right           : 0;
    background-color: var(--color-mark-head-bg, #252525);
    // background: linear-gradient(var(--color-mark-head-bg), var(--color-mark-head-bg) @headerHeight, var(--color-mark-head-bg ) @headerHeight, var(--color-mark-head-bg ));
    opacity         : 0;
    z-index         : -1;
    overflow        : hidden;

    .light-switch-mark-point {
        position        : absolute;
        border-radius   : 50%;
        background-color: var(--color-body-bg, #eee);
        width           : 100px;
        height          : 100px;
        top             : 15px;
        right           : 20px;
    }

    &.active {
        opacity: 1;

        .light-switch-mark-point {
            transition: transform .6s;
            transform : translate3d(0, 0, 0) scale3d(40, 40, 1);
        }
    }
}

/* 文章导航 */
.post-toc {
    position  : fixed;
    top       : calc(calc(100vh - @headerHeight) / 2 + @headerHeight);
    left      : 0;
    width     : 4em;
    height    : fit-content;
    max-height: calc(100vh - @headerHeight);
    transform : translateY(-50%);
    text-align: initial;


    ol {
        list-style : none;
        user-select: none;
        margin     : 0 1em 0 0;

        &.toc {
            margin : 0;
            padding: 0;
        }

        .toc-item {

            .toc-link {
                position        : relative;
                display         : flex;
                height          : 16px;
                margin          : 0 0 10px 0;
                background-color: var(--color-toc-bg, #eee);
                border-radius   : 0 16px 16px 0;

                &.current {
                    background-color: var(--color-link, #6062ce);
                }

                .toc-tips {
                    position        : absolute;
                    left            : calc(100% + .5em);
                    width           : max-content;
                    top             : -4px;
                    font-size       : 14px;
                    background-color: var(--color-head-bg);
                    border-radius   : 6px;
                    padding         : 0 .5em;
                    line-height     : 24px;
                    display         : none;
                    box-shadow      : 8px -5px 12px 0 #00000036;
                }

                &:hover {
                    .toc-tips {
                        display: block;
                    }
                }
            }


        }


    }
}

/* 加载 */
.loaded {
    display: none;

    svg {
        .hColorMixin(fill)
    }
}

.loading {
    margin-top: 2em;
    text-align: center;

    svg {
        .hColorMixin(fill)
    }
}

/* back top */
.back-btn {
    border-style    : none;
    cursor          : pointer;
    position        : fixed;
    outline         : none;
    right           : -30px;
    bottom          : 3em;
    background-color: transparent;
    transition      : right var(--transitionTime, .3s ease);

    svg {
        .hColorMixin(fill)
    }

    &.show {
        right    : 30px;
        //display: block
    }
}

/* 留言标题 */
.comments-list-header {
    text-align: center;
    margin    : 2em 0 1em;

    &.post {
        margin-top: 2em;
    }
}

/* 文本选中 */
*::-webkit-selection {
    .selectText()
}

*::-moz-selection {
    .selectText()
}

*::selection {
    .selectText()
}

.cg-icon {
    width         : 26px;
    height        : 26px;
    vertical-align: -0.15em;
    fill          : currentColor;
    overflow      : hidden;
}

#more {
    display: none
}

@import './hithlight.less';
@import './nprogress.less';